import Vue from 'vue'
import VueRouter from 'vue-router'

const Reg = () => import('@/views/Reg')
const Layout = () => import('@/views/Layout')
const ArtCategory = () => import('@/views/ArtCateGory')
const Home = () => import('@/views/Home')
const ArtList = () => import('@/views/ArtList')
const UserInfo = () => import('@/views/UserInfo')
const ChangeAvatar = () => import('@/views/ChangeAvatar')
const ResetPwd = () => import('@/views/ResetPwd')
// 导入登录页面组件
// import Login from '@/views/Login'
// 所谓路由懒加载就是将路由导入的方式处理成函数导入的方式
// 只要配置完路由懒加载后, 进入到对应的页面才会加载对应页面的资源
// yarn build的时候会生成许多js css文件
const Login = () => import('@/views/Login')
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/reg', component: Reg },
    {
      path: '/',
      component: Layout,
      children: [
        { path: '/', component: Home },
        { path: '/artcategory', component: ArtCategory },
        { path: '/artlist', component: ArtList },
        { path: '/userinfo', component: UserInfo },
        { path: '/changeavatar', component: ChangeAvatar },
        { path: '/resetpwd', component: ResetPwd }
      ]
    }
  ]
})

// 路由实例上有一个beforeEach前置导航守卫 - 控制可不可以访问某些页面, 拦截页面
// to 要去哪 路由信息对象
// from 从哪来 路由信息对象
// next 是一个放行函数  next() 表示放行  next('/地址')
const whiteList = ['/login', '/reg']
router.beforeEach((to, from, next) => {
  // 1.未登录 访问 /login  /reg 没有权限的页面直接放行
  // if (to.path === '/login' || to.path === '/reg') {
  // if (whiteList.includes(to.path)) {
  if (whiteList.indexOf(to.path) !== -1) {
    next()
  } else {
    // 2. 访问有权限的页面 先检测用户是否登录(登录过直接放行, 没有登录过,去登录)
    // 2.1 检测token , 有token直接放行
    if (localStorage.getItem('tokenKey')) {
      next()
    } else {
      // 2.2 没有token还访问有权限的页面, 强制登录
      next('/login')
    }
  }
  // next()

  // 未登录不允许访问 / 拦截有权限的页面
})
export default router

// $router 路由实例对象
// $route 路由信息对象(地址栏的信息被处理成一个对象了)
